<template>
  <el-dialog title="选择项目" :visible.sync="show" append-to-body :close-on-click-modal="false" width="1000px" @closed="closed">
    <el-form ref="queryForm" :model="queryParams" size="mini" inline :class="{ disabled: disableAction }" style="margin-top: -20px">
      <el-form-item label="设计操盘" prop="isDevelopLine">
        <el-select v-model="queryParams.isDevelopLine" placeholder="请选择" clearable @clear="handleQuery" style="width: 90px">
          <el-option v-for="dict in yesOrNo" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="工程操盘" prop="isEngineerLine">
        <el-select v-model="queryParams.isEngineerLine" placeholder="请选择" clearable @clear="handleQuery" style="width: 90px">
          <el-option v-for="dict in yesOrNo" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model.trim="toggleInput" placeholder="请输入内容" clearable @clear="handleQuery" @keyup.enter.native="handleQuery" style="width: 300px">
          <el-select v-model="toggleSelect" slot="prepend" placeholder="选择范围" style="width: 100px">
            <el-option label="项目名称" value="displayName" />
            <el-option label="集群" value="deptName1" />
            <el-option label="事业部" value="deptName2" />
            <el-option label="城市公司" value="deptName3" />
          </el-select>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table ref="table" v-loading="listLoading" :data="filteredList" size="small" height="calc(88vh - 180px)" empty-text="暂无数据或已全选" @row-click="rowClick" @selection-change="onSelect">
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column label="集群" prop="deptName1" show-overflow-tooltip min-width="100" />
      <el-table-column label="事业部" prop="deptName2" show-overflow-tooltip min-width="100" />
      <el-table-column label="城市公司" prop="deptName3" show-overflow-tooltip min-width="100" />
      <el-table-column label="项目" prop="displayName" show-overflow-tooltip min-width="200" />
      <el-table-column label="设计操盘" align="center" min-width="80">
        <dict-tag slot-scope="{ row }" :options="yesOrNo" :value="row.isDevelopLine" />
      </el-table-column>
      <el-table-column label="工程操盘" align="center" min-width="80">
        <dict-tag slot-scope="{ row }" :options="yesOrNo" :value="row.isEngineerLine" />
      </el-table-column>
    </el-table>

    <div slot="footer">
      <span v-if="selected.length" style="font-size: 14px; color: #606266; margin-right: 20px"> 已选择 {{ selected.length }} 项 </span>
      <el-button type="primary" :disabled="listLoading || !selected.length" @click="btnSubmit">确 定</el-button>
      <el-button :disabled="disableAction" @click="show = false">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
// 选择项目
import { debounce, isLikeOrEqual } from '@/utils'
import { yesOrNo } from '@/utils/baseData'
import { listProPoorAll } from '@/api/cqPe/peRecord'
const searchFields = ['displayName', 'deptName1', 'deptName2', 'deptName3']
export default {
  data() {
    return {
      yesOrNo,
      show: false,
      listLoading: false,
      list: [],
      filteredList: [],
      queryParams: {
        isDevelopLine: '',
        isEngineerLine: ''
      },
      toggleSelect: 'displayName',
      toggleInput: '',
      selected: [],
      bsNodeId: '',
      deptId1: '',
      existIdMap: {}
    }
  },
  computed: {
    disableAction() {
      return this.listLoading
    }
  },
  created() {
    this.btnSubmit = debounce(this.onSubmit, 1e3, true)
  },
  methods: {
    closed() {
      this.listLoading = false
      this.list = []
      this.filteredList = []
      this.resetForm('queryForm')
      this.toggleSelect = 'displayName'
      this.toggleInput = ''
    },
    open({ bsNodeId, deptId1, list }) {
      if (!bsNodeId) return this.$message.error('参数错误：bsNodeId 不能为空')
      this.show = true
      this.bsNodeId = bsNodeId
      this.deptId1 = deptId1 || ''
      // 已存在的 id map
      this.existIdMap = (list || []).reduce((o, i) => !void (o[i.uniqueId] = 1) && o, {})
      this.getList()
    },
    async getList() {
      const { bsNodeId, deptId1, existIdMap } = this
      const opt = {
        pageNum: 1,
        pageSize: 9999,
        dimension: 'LAND',
        bsNodeId
      }
      if (deptId1) opt.deptId1 = deptId1

      this.listLoading = true
      const res = await listProPoorAll(opt).catch(() => false)
      this.listLoading = false
      if (res === false) return

      let data = res.rows || []
      // 过滤已存在的
      data = data.filter(i => !existIdMap[i.uniqueId])
      // 排序
      data = data.sort((a, b) => a.displayName.localeCompare(b.displayName, 'zh-Hans-CN', { numeric: true }))
      this.list = data
      this.handleQuery()
    },
    handleQuery() {
      // 本地搜索
      const { toggleSelect, toggleInput, list } = this
      const { isDevelopLine, isEngineerLine } = this.queryParams
      const opts = { like: {}, eq: {} }
      if (toggleSelect && toggleInput) opts.like = { [toggleSelect]: toggleInput }
      if (isDevelopLine) opts.eq.isDevelopLine = +isDevelopLine
      if (isEngineerLine) opts.eq.isEngineerLine = +isEngineerLine

      this.filteredList = list.filter(i => isLikeOrEqual(i, opts))
    },
    resetQuery() {
      this.resetForm('queryForm')
      this.toggleSelect = 'displayName'
      this.toggleInput = ''
      this.handleQuery()
    },
    rowClick(row) {
      this.$refs.table.toggleRowSelection(row)
    },
    onSelect(val) {
      this.selected = val
    },
    async onSubmit() {
      this.$emit('selected', JSON.parse(JSON.stringify(this.selected)))
      this.show = false
    }
  }
}
</script>
